<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*div默认高度为内容高度*/
        body > div {
            width: 200px;
            /*  height: 200px;*/
            border: 2px solid slateblue;
            overflow: hidden; /*解决所有子元素浮动时导致高度为0的异常*/
        }

        #d1 {
            width: 50px;
            height: 50px;
            border: 2px solid red;
            background-color: red;
            float: left;
        }

        #d2 {
            width: 50px;
            height: 50px;
            border: 2px solid green;
            background-color: green;
            float: left;
        }

        #d3 {
            width: 50px;
            height: 50px;
            border: 2px solid blue;
            background-color: blue;
              float: left;
        }
        #d4{
            width: 200px;
            height: 200px;
            background-color: pink;

        }
        ul{
            list-style-type: none;/*去除图标*/
            overflow: hidden;
            background-color: #0AA1ED;

        }
        li{
            float: left;
            margin-right: 20px;
        }
        a{
            text-decoration: none;
        }


    </style>
</head>
<body>
<ul>

    <li><a href="">刘备</a> </li>
    <li><a href="">赵云</a> </li>
    <li><a href="">刘禅</a> </li>
    <li><a href="">孙尚香</a> </li>
    <li><a href="">诸葛亮</a> </li>

</ul>

<div>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
</div>
<div id="d4"></div>



</body>
</html>